<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	import { accountDetail } from '@/package_dealer/api/home'
	import { useUserStore } from '@/stores/user'
	import { useNotify } from '@/hooks/web/useNotify/index.js'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const { userInfo } = useUserStore()


	const paging = ref()
	const useCURD = () => {
		const dataList = ref([])

		const getList = async (page : number, limit : number) => {
			const params = { page, limit }
			try {
				const res = await accountDetail(params)
				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,
			query
		}
	}
	const { dataList, getList, searchAction, query } = useCURD()
</script>

<template>
	<z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
		<view class="main">
			<view class="main-box" v-for="(item,index) in dataList" :key="index">
				<view class="main-header">
					<view class="header-name">{{item.year}}/{{item.month}}/{{item.day}}
					</view>
					<view class="header-right">
						<text class="right-name">￥{{item.money}}</text>
					</view>
				</view>
				<view>
					<view class="line"></view>
					<view class="main-jl">收款金额：<text style="color: rgba(2, 14, 36, 1);">{{item.order_money}}</text>
					</view>
					<view class="main-jl">服务费用：<text style="color: rgba(2, 14, 36, 1);">{{item.fee}}</text>
					</view>
				</view>
			</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</z-paging>
</template>

<style scoped lang="scss">
	.user_info_wrap {
		width: 100%;
		height: 109rpx;
		background-color: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.main {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容iOS 11.2及以上 */
		.main-box {
			width: 702rpx;
			border-radius: 12rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;
			margin: 20rpx auto;

			.main-header {
				display: flex;
				justify-content: space-between;

				.header-name {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(2, 14, 36, 1);
				}

				.header-right {
					display: flex;

					.right-img {
						width: 34rpx;
						height: 34rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(245, 99, 81, 1);
					}
				}
			}

			.mian-address {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.address-name {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(100, 101, 102, 1);
				}
			}

			.line {
				width: 572rpx;
				height: 4rpx;
				margin: 20rpx 0rpx;
				background: linear-gradient(90deg, rgba(55, 131, 252, 1) 0%, rgba(255, 255, 255, 0) 100%);
			}

			.main-jl {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(101, 103, 105, 1);
				margin-bottom: 20rpx;
			}

		}
	}
</style>